import React, { Component } from 'react'
import './index.css'

export default class List extends Component {
  render() {
    return ( 
      <div className="row">
        {  
          this.props.isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
					this.props.isLoading ? <h2>Loading......</h2> :
					this.props.err ? <h2 style={{color:'red'}}>{this.props.err}</h2> :
          this.props.itemLists.map((item) => {
            return (
              <div className="card" key={item.id} onClick={() => this.goDetail(item.id)}>
                <div rel="noreferrer" target="_blank">
                  <img alt={item.name} src={item.pic} style={{ width: '100px',height: '100px' }} />
                </div>
                <p className="card-text">{item.name}</p>
              </div>
            )
          })
        }
      </div>
    )
  }
  goDetail(id) {
    alert(id)
  }
}
